<html>
    
    <head>
        
        <title>wikiPsalms</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link type="text/css" rel="stylesheet" href="CSS/default.css" />
        <link type="text/css" href="css/themename/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
        
        <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
        <script type="text/javascript" src="js/wikiPsalms.js"></script>
        
        <?php 
            
            //require_once(ratings.php);
        
        ?>
        
    </head>
    
    <body>
    
        <div class="wrapper">
            
            
<!-- *****HEADER************************************************************ -->


            <div class="header">

                <div class="nav_bar">
                    
                    <div class="logo">
                        
                        <p class="logo_text">wikiPsalms</p>
                        
                    </div>
                    <!-- END OF LOGO DIV -->
                    
                    <div class="nav">
                        
                        <ul>
                            <li>Submit</li>
                            <li>About</li>
                            <li>Contact</li>
                            <li>Donate</li>
                        </ul>
                        
                    </div>
                    <!-- END OF LOGO DIV -->
                    
                </div>
                <!-- END OF NAV_BAR DIV -->
                
                <div class="login_bar">
                    
                    <form id="login">
                        <label for="username">Log-in:</label>
                        <input type="text" name="username" value="Username" />
                        <input type="password" name="password" value="Password" />
                    </form>
                </div>
                <!-- END OF LOGIN_BAR DIV -->
                
            </div>
            <!-- END OF HEADER DIV -->
            
            
            
<!-- *****MAIN_CONTENT****************************************************** -->
            
            

            <div class="main_content">
                
                <div class="search_form">
                    
                    <div class="psalm_selector">
                        
                        <div id="slider"></div>
                        
                        <p id="psalm_selector_title">Psalm Selector</p>
                        <form id="search_form" action="" method="GET" oninput="slider_output.value=slider.value">
                            <input id="psalm_slider" name="slider" size="150" type="range" min="1" max="150" value="23" onchange="showValue(this.value)" />
                            <output id="psalm_slider_output" name="slider_output" for="slider">23</output>
                            
                        
                    </div>
                    <!-- END OF PSALM_SELECTOR DIV -->
                    
                    <div class="price">
                        
                            <input type="radio" name="price" value="free" />Free
                            <input type="radio" name="price" value="commercial" />Commercial
                        
                    </div>
                    <!-- END OF PRICE DIV -->
                    
                    <div class="comp_type">
                        
                            <input type="checkbox" name="comp_type" value="a capella" />A capella
                            <input type="checkbox" name="comp_type" value="instrumental" />Instrumental
                            <input type="checkbox" name="comp_type" value="solo" />Solo
                            <input type="checkbox" name="comp_type" value="chant" />Chant
                            <input type="checkbox" name="comp_type" value="SATB" />SATB
                        
                    </div>
                    <!-- END OF COMP_TYPE DIV -->
                    
                    <div class="genre">
                        
                            <input type="radio" name="genre" value="modern" />Modern
                            <input type="radio" name="genre" value="reformation" />Reformation<br/>
                            <input type="radio" name="genre" value="baroque" />Baroque
                            <input type="radio" name="genre" value="medieval" />Medieval<br/>
                            <input type="radio" name="genre" value="romantic" />Romantic
                            <input type="radio" name="genre" value="ancient" />Ancient
                            
                            <div><input type="submit" /></div>
                            
                        </form>
                        <!-- END OF SEARCH FORM -->
                        
                    </div>
                    <!-- END OF GENRE DIV -->
                    
                    <div class="rating">
                            
                            
                        
                        
                    </div>
                    <!-- END OF RATING DIV -->
                    
                </div>
                <!-- END OF SEARCH_FORM DIV -->
                
            </div>
            <!-- END OF MAIN_CONTENT DIV -->
            
            
            
<!-- *****FOOTER************************************************************ -->
            
            
            
            <div class="footer">
                
                
                
            </div>
            <!-- END OF FOOTER DIV -->
            

        </div>
        <!-- END OF WRAPPER DIV -->
        
<!-- *****END*************************************************************** -->        
    
    </body>    
    
</html>